<template>
	<view>
		<swiper class="ex-mall-tab-body" :current="tabCurrentIndex" @change="changeTab" disable-touch :duration="0">
			<swiper-item>
				<scroll-view @touchmove.stop class="ex-mall-tab-body-scroll" scroll-y @scroll="tabScroll">
					<view class="ex-mall-tab-body-scroll" v-if="tabList[0].load">
						<index ref="index" @loaded="tabLoaded"></index>
						<view class="ex-mall-tab-bar-placeholder" :class="[$themeClass('panel-content-bg-color')]">
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view @touchmove.stop class="ex-mall-tab-body-scroll" scroll-y @scroll="tabScroll">
					<view class="ex-mall-tab-body-scroll" v-if="tabList[1].load">
						<search ref="search" @loaded="tabLoaded"></search>
						<view class="ex-mall-tab-bar-placeholder"
							:class="[$themeClass('panel-another-content-bg-color')]"></view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view @touchmove.stop class="ex-mall-tab-body-scroll" scroll-y @scroll="tabScroll">
					<view class="ex-mall-tab-body-scroll" v-if="tabList[2].load">
						<shoppingcart ref="shoppingcart" @loaded="tabLoaded"></shoppingcart>
						<view class="ex-mall-tab-bar-placeholder" :class="[$themeClass('panel-content-bg-color')]">
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view @touchmove.stop class="ex-mall-tab-body-scroll" scroll-y @scroll="tabScroll">
					<view class="ex-mall-tab-body-scroll" v-if="tabList[3].load">
						<my ref="my" @loaded="tabLoaded"></my>
						<view class="ex-mall-tab-bar-placeholder" :class="[$themeClass('page-another-bg-color')]">
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

		<view class="ex-mall-tab-bar">
			<view class="ex-mall-tab-bar-list">
				<view class="ex-mall-tab-bar-list-item" v-for="(x, xi) in tabList" :key="xi" @click="clickTab(x)">
					<view class="ex-mall-tab-bar-active" v-if="x.selected">
						<view class="ex-mall-tab-bar-active-text">{{ x.text }}</view>
						<view class="ex-mall-tab-bar-active-oval"></view>
					</view>
					<view class="ex-mall-tab-bar-active" v-else>
						<view class="ex-mall-tab-bar-active-icon" :class="x.icon"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Index from '@/pages/tab/index'
import Search from '@/pages/tab/search'
import Shoppingcart from '@/pages/tab/shoppingcart'
import My from '@/pages/tab/my'
import config from '@/config'
import {
	mapState
} from 'vuex'

export default {
	components: {
		Index,
		Search,
		Shoppingcart,
		My
	},
	data(){
		return {
			shopNewData:[]
		}
	},
	computed: {
		...mapState(['tabCurrentIndex', 'tabPreviousIndex', 'tabList'])
	},
	onLoad(options) {
		// 临时的
		if (this.tabList.filter(x => x.name === 'theme').length === 0) {
			this.tabList.push({
				name: 'theme',
				text: '主题',
				icon: 'ri-switch-line',
				click: () => {
					var theme = this.$store.state.theme
					if (theme) {
						this.$switchTheme() // 切换回默认主题
						uni.showToast({
							icon: 'none',
							title: '切换主题：默认'
						})
					} else {
						this.$switchTheme('dark') // 切换到暗黑主题
						uni.showToast({
							icon: 'none',
							title: '切换主题：暗黑'
						})
					}
					// ...其他主题切换扩展
				}
			})
		}
		this.init(options)
	},
	onShow() {
		var tab = this.tabList[this.tabCurrentIndex]
		var refCurrent = this.$refs[tab.name]
		if (refCurrent) {
			// #ifdef H5
			this.replaceRoute(tab)
			// #endif
			refCurrent.show && refCurrent.show()
		}
	},
	onHide() {
		var tab = this.tabList[this.tabCurrentIndex]
		var refCurrent = this.$refs[tab.name]
		refCurrent && refCurrent.hide && refCurrent.hide()
	},
	methods: {
		init(options) {
			this.tabList.forEach(x => {
				// 植入属性
				this.$set(x, 'selected', false)
				this.$set(x, 'load', false)
				this.$set(x, 'loaded', false)
			})

			this.$switchTab(options.tab || this.tabList[0].name)
		},
		tabScroll(e) {
			var ref = this.$refs[this.tabList[this.tabCurrentIndex].name]
			ref && ref.scroll && ref.scroll(e)
		},
		tabShow(tab) {
			uni.setNavigationBarTitle({
				title: tab.text
			})

			if (this.tabPreviousIndex != this.tabCurrentIndex) {
				var refPrevious = this.$refs[this.tabList[this.tabPreviousIndex].name]
				refPrevious && refPrevious.hide && refPrevious.hide()
			}
			var refCurrent = this.$refs[tab.name]
			refCurrent && refCurrent.show && refCurrent.show()

			// 使用this.$router.replace后，不切换tab直接跳转非tab页面，返回tab页面正常。切换其他tab再跳转非tab页面，tab被销毁，无法正常返回tab页面。
			// 解决办法为使用history.replaceState
			// #ifdef H5
			this.replaceRoute(tab)
			// #endif
		},
		tabLoaded(e) {
			var tab = this.findTabByName(e.name)
			tab.loaded = true
			this.tabShow(tab)
		},
		changeTab(e) {
			var tab = this.tabList[e.detail.current]
			this.$switchTab(tab.name)
			if (tab.loaded) {
				this.tabShow(tab)
			}
		},
		clickTab(tab) {
			if (tab.name === this.tabList[this.tabCurrentIndex].name) return

			if (tab.click) {
				tab.click()
				return
			}

			this.$switchTab(tab.name)
		},
		// #ifdef H5
		replaceRoute(tab) {
			history.replaceState({
				name: tab.name
			}, '', `#/?tab=${tab.name}`)
		},
		// #endif
		findTabByName(name) {
			return this.tabList.filter(x => x.name === name)[0]
		}
	}
}
</script>

<style lang="scss"></style>
